<template>
  <el-card>
    <div slot="header">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>评论管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-table :data="tableData">
        <el-table-column prop="title" label="标题"> </el-table-column>
        <el-table-column prop="num" label="总评论数"> </el-table-column>
        <el-table-column prop="fans" label="粉丝评论数"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state ? "正常" : "关闭" }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.state ? 'success' : 'danger'"
              @click="changed(scope.$index)"
              >{{ scope.row.state ? "打开评论" : "关闭评论" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        style="
          margin-top: 20px; text-align: right;"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "comment",
  data() {
    return {
      tableData: [
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: true
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: false
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: true
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: false
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: true
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: false
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: true
        },
        {
          title: "2016-05-02",
          num: "0",
          fans: "0",
          state: false
        }
      ]
    };
  },
  methods: {
    changed(index) {
      this.tableData[index].state = !this.tableData[index].state;
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
};
</script>
<style lang="scss" scoped></style>
